<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      background: #000212;
    }

    /* 2.1 配置 vip-status 样式 */
    .vip-status {
      position: relative;
      /* 2.6.2 设置(父: 相对定位), 让VIP图标是定位在它右侧显示的 */

      width: 93px;
      height: 28px;
      cursor: pointer;
    }

    /* 2.2 配置 icon-box 样式 */
    .icon-box {
      position: relative;
      /* 2.3同步: 父相对定位 */

      width: 100%;
      height: 24px;
      border-radius: 20px;
      padding-left: 16px;
      z-index: 0;
      overflow: hidden;
    }

    .icon-box .text {
      /* background: linear-gradient(179.99998deg, #fce4ba, #fffcf7); */
      color: #fce4ba;
      font-size: 10px;
      font-style: normal;
      font-weight: 400;
      letter-spacing: -0.01px;
      line-height: 24px;
    }

    /* 2.3 conic函数图形 */
    .icon-box::before {
      content: "";
      position: absolute;

      /* 细节1: conic函数图形是以: icon-box盒子中心点, 进行逆时针往复旋转渲染的！！！ */
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);

      width: 100%;
      height: 100%;
      background-image: conic-gradient(transparent 10%, transparent, #f4f4f4);

      animation: borderRotate 3s linear infinite;
      z-index: -2;
      /* 2.4.3 conic图形-遮罩层: 层叠等级为最低(-2), 被背景图盖住, 只露出1像素 “边框” */
    }
    @keyframes borderRotate {
      100% {
        transform: translate(-50%, -50%) rotate(1turn);
      }
    }

    /* 2.4 通过定位一个遮罩层url图片, 盖住conic渲染的图形 */
    .icon-box::after {
      content: "";
      position: absolute;

      /* 2.4.4 定位下移动【图片-遮罩层】位置, 让conic只保留四周 “闪烁边框” */
      left: 1px;
      bottom: 1px;

      width: calc(100% - 2px);
      height: calc(100% - 2px);
      background: url(https://img.bosszhipin.com/static/file/2024/3crtwwfu7j1724315023101.png.webp) no-repeat;
      background-size: cover;
      /* 2.4.1 设置背景图大小为 cover 覆盖形式 */
      z-index: -1;
      /* 2.4.2 图片-遮罩层: 层叠等级为中等(-1) */
    }

    /* 2.5 VIP闪烁效果实现 */
    .icon-box .shark-wrap {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 93px;
      height: 24px;

      /* 2.5.2同步: 并且不能在 shark-wrap盒子 上看到此【白色透明渐变图形】 */
      overflow: hidden;
      /* mask: url(https://img.bosszhipin.com/static/file/2024/3crtwwfu7j1724315023101.png.webp) 0 0 /100%; */
    }
    .icon-box .shark-wrap::after {
      content: "";
      position: absolute;
      top: -20%;
      right: -20%;
      bottom: -20%;
      left: -20%;
      background: linear-gradient(45deg,rgba(255,255,255,0) 40%,rgba(255,255,255,.7),rgba(255,255,255,0) 60%);
      /* 2.5.1 到这, shark-wrap盒子中央便会出现一个白色透明渐变图形 */

      /* 2.5.2 默认在左边较远的位置 */
      transform: translate(-100%);

      /* 2.5.3 设置动画: 2s后, 此渐变图形由左到右(-100% 至 100%)X坐标进行移动, 实现VIP闪烁效果 */
      animation: shark-wrap 2s infinite;
    }
    @keyframes shark-wrap {
      100% {
        transform: translate(100%);
      }
    }

    /* 2.6 VIP图标样式配置 */
    .vip-icon {
      width: 19px;
      height: 28px;
      background: url(https://img.bosszhipin.com/static/file/2024/gs850hwle31724307559502.png.webp) no-repeat;
      background-size: cover;
      position: absolute;
      top: -5px;
      right: 8px;

      /* 2.6.1 定位上VIP图标后, 默认设置比包裹它的 vip-status盒子 层叠等级高一点 */
      z-index: 1;
    }
  </style>
</head>

<body>
  <!-- 1.1 主盒子: vip-status -->
  <div class="vip-status">
    <!-- 1.2 内部盒子1: icon-box盒子 -->
    <div class="icon-box">
      <!-- 1.3 先往icon-box上定位出一个conic函数图形 -->

      <span class="text">开通会员</span>

      <!-- 1.5 内部盒子2: shark-wrap盒子 -->
      <!-- 细节2: 网页VIP用户图标之所以会有: 从左往右滑过的白色闪光效果, 本质就是一个渐变盒子往右移动 -->
      <div class="shark-wrap"></div>

      <!-- 1.4 通过定位, 盖上一层遮罩层, 充当icon-box背景图 -->
    </div>

    <!-- 1.6 设置VIP对应图标 -->
    <div class="vip-icon"></div>
  </div>
</body>

</html>